<template>
  <!-- 进行处置 -->
  <h-modal class="event-modal" v-model="show" :title="`进行处置`" :centerTitle="title" @submit="submit">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" size="large">
      <a-row :gutter="100">
        <a-col :span="12">
          <a-form-model-item label="操作">
            <a-select v-model="form.type" placeholder="请选择操作" prop="type">
              <a-select-option value="1">进行处置</a-select-option>
              <a-select-option value="2">关联处置事件</a-select-option>
              <a-select-option value="3" v-if="handleType == 1">转为观察事件</a-select-option>
              <a-select-option value="4" >直接归档</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <template v-if="form.type == 2">
          <a-col :span="12">
            <a-form-model-item label="关联处置事件" prop="eventId">
              <a-select option-filter-prop="children" :filter-option="filterOption" show-search v-model="form.eventId" placeholder="请选择关联处置事件">
                <a-select-option :value="item.id" v-for="item in list" :key="item.id">{{ item.title | htmlFilter }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </template>
        <template v-if="form.type == 1">

          <a-col :span="12">
            <a-form-model-item label="分类选择">
              <a-select placeholder="分类选择" v-model="form.typeId">
                <a-select-option v-for="item in typeList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="周期选择">
              <a-select placeholder="请选择" v-model="form.dataCycle">
                <a-select-option :value="1">1</a-select-option>
                <a-select-option :value="3">3</a-select-option>
                <a-select-option :value="5">5</a-select-option>
                <a-select-option :value="7">7</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="事件属地" prop="address">
              <a-select v-model="form.address" placeholder="请输入">
                <a-select-option v-for="item in address" :value="item.title" :key="item.title">{{ item.title }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="事件等级" prop="eventGrade">
              <a-radio-group buttonStyle="solid" v-model="form.eventGrade">
                <a-radio-button :value="0">一般预警</a-radio-button>
                <a-radio-button class="radio-button-yellow" :value="1">重要预警 </a-radio-button>
                <a-radio-button class="radio-button-orange" :value="2">紧急预警</a-radio-button>
                <!-- <a-radio-button class="radio-button-red" :value="3">特级预警</a-radio-button> -->
              </a-radio-group>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="提醒接收对象" prop="mobile">
              <a-select
                mode="multiple"
                show-search
                option-filter-prop="children"
                :filter-option="filterOption"
                v-model="form.mobile"
                placeholder="请选择">
                <a-select-option v-for="item in leader" :value="item.mobile" :key="item.realname">{{ item.realname }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

         <template v-if="form.type == 1">
           <a-col :span="24">
             <a-form-model-item label="属地下发" prop="departIdList">
               <a-checkbox-group v-model="form.departIdList">
                 <a-checkbox style="width: 140px;margin: 5px 0" v-for="item in addressList" :key="item.value" :value="item.value">{{ item.label }}</a-checkbox>
               </a-checkbox-group>
             </a-form-model-item>
           </a-col>
           <a-col :span="24">
             <a-form-model-item label="市级部门下发" prop="departIdList2">
               <a-checkbox-group v-model="form.departIdList2">
                 <a-checkbox style="width: 300px;margin: 5px 0" v-for="item in addressList2" :key="item.value" :value="item.value">{{ item.label }}</a-checkbox>
               </a-checkbox-group>
             </a-form-model-item>
           </a-col>
         </template>
          <a-col :span="24">
            <a-form-model-item label="事件描述" prop="">
              <a-textarea v-model="form.describe" placeholder="请输入事件描述" :rows="3"></a-textarea>
            </a-form-model-item>
          </a-col>
        </template>
        <template v-else-if="form.type == 3">
          <a-col :span="24">
            <a-form-model-item label="事件描述" prop="describe">
              <a-textarea v-model="form.describe" placeholder="请输入事件描述" :rows="3"></a-textarea>
            </a-form-model-item>
          </a-col>
        </template>
        <template v-else-if="form.type == 4">
          <a-col :span="24">
            <a-form-model-item label="提醒接收对象" prop="mobile">
              <a-select show-search option-filter-prop="children" :filter-option="filterOption" v-model="form.mobile" placeholder="请选择">
                <a-select-option v-for="item in leader" :value="item.mobile" :key="item.realname">{{ item.realname }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="事件描述" prop="">
              <a-textarea v-model="form.describe" placeholder="请输入事件描述" :rows="3"></a-textarea>
            </a-form-model-item>
          </a-col>
        </template>
      </a-row>

      <!-- <a-button class="cancel-btn" type="default" shape="round">取消处置</a-button>
      <h-tooltip class="cancel-btn" title="取消处置是干什么的？" /> -->
    </a-form-model>
  </h-modal>
</template>

<script>
import moment from 'moment';
// eslint-disable-next-line no-unused-vars
import {
  getEventName,
  eventSentiment,
  finishSentiment,
  sentimentDetail,
  getLeader,
  getTodayDutyLeader,
  sentimentToEvent,
  eventTypeId,
  updateSentimentToObserve,
  getAllPossession,
  getAddressType,
  getEventTypeId, getEventAddressOrder
} from '@/api/serve';
import cloneDeep from 'lodash/cloneDeep';

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    handleType: {
      type: [String, Number],
      default: ''
    },
    dateDuty: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    }
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
        if (val) {
          this.getEventName();
          this.getDetail();
          this.getType();
          this.getLeader();
          this.form.eventGrade = this.label === null ? 0 : Number(this.label);
          getAddressType({
            title: this.title,
            id: this.id,
            eventId: this.id
          }).then(res => {
            this.form.typeId = String(res.data.typeId);
            this.form.address = res.data.title;
          });
          this.init()
        }
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    }
  },
  data() {
    return {
      moment,
      show: false,
      submitLoading: false,
      form: {
        eventGrade: 0,
        type: '1',
        typeId: '',
        address: '',
        mobile: '',
        describe: '',
        departIdList: []
      },
      list: [],
      typeList: [],
      rules: {
        eventId: [{ required: true, message: '请输入' }],
        waysRemind: [{ required: true, message: '请输入' }],
        address: [{ required: true, message: '请输入' }],
        eventGrade: [{ required: true, message: '请输入' }],
        describe: [{ required: true, message: '请输入' }],
        mobile: [{ required: true, message: '请输入' }]
      },
      address: [],
      leader: [],
      addressList: [],
      addressList2: [],
    };
  },
  created() {
    // this.getType();
    this.getAddress();
  },
  methods: {
    init() {
      getEventTypeId().then(res => {
        this.eventList = res.data;
      });
      getEventAddressOrder().then(res => {
        this.addressList = res.data.filter(res => res.isOut === 0).map(item => {
          return {
            label: item.address,
            value: item.id
          };
        });
        this.addressList2 = res.data.filter(res => res.isOut === 1).map(item => {
          return {
            label: item.depart,
            value: item.id
          };
        });
      });
    },

    filterOption(input, option) {
      console.log(option);
      return (
        option.componentOptions.children[0].text.indexOf(input.toLowerCase()) >= 0
      );
    },
    getAddress() {
      getAllPossession().then(res => {
        this.address = res.data;
      });
    },
    getLeader() {
      getLeader().then(res => {
        this.leader = res.data;
        getTodayDutyLeader().then(res2 => {
          if (this.dateDuty === null) {
            this.form.mobile = res2.data ? [res2.data.mobile] : [];
          } else {
            let sum = 0;
            res.data.forEach(e => {
              if (e.realname === this.dateDuty) {
                this.form.mobile = [e.mobile];
                sum++;
              }
              if (sum === 0) {
                this.form.mobile = res2.data ? [res2.data.mobile] : [];
              }
            });
          }
        });
      });
    },
    getType() {
      eventTypeId({
        eventId: this.id
      }).then(res => {
        this.typeList = res.data;
      });
    },
    getEventName() {
      getEventName().then(res => {
        this.list = res.data;
      });
    },
    getDetail() {
      if (this.id) {
        // sentimentDetail({
        //   id: this.id
        // }).then(res => {
        //   this.form = res.data;
        // });
      }
    },
    submit() {
      if (this.submitLoading) return;
      this.submitLoading = true;
      this.$refs.ruleForm.validate(valid => {
        console.log('valid', valid);
        if (this.form.type == 3 && !this.form.describe) {
          this.$message.error('请输入事件描述！');
          this.submitLoading = false;
          return false;
        }
        if (valid) {
          if (this.form.type == '2') {
            this.form.id = this.id;
            const { id, eventId } = this.form;
            eventSentiment({ id, eventId }).then(res => {
              this.$message.success(res.msg);
              this.show = false;
              this.$emit('submit', cloneDeep(this.form));
              this.form = cloneDeep({});
            }).finally(() => {
              this.submitLoading = false;
            });
          } else if (this.form.type == 1) {
            const form = cloneDeep(this.form);
            delete form.eventId;
            delete form.type;
            form.sentimentId = this.id;
            if (form.mobile) form.mobile = form.mobile.join(',');
            sentimentToEvent({
              ...form,
              departIdList: [...this.form.departIdList, ...this.form.departIdList2],
            }).then(res => {
              this.$message.success(res.msg);
              this.show = false;
              this.$emit('submit', cloneDeep(this.form));
              this.form = cloneDeep({});
            }).finally(() => {
              this.submitLoading = false;
            });
          } else if (this.form.type == 3) {
            updateSentimentToObserve({
              id: this.id,
              describe: this.form.describe
            }).then(res => {
              this.$message.success(res.msg);
              this.show = false;
              this.$emit('submit', cloneDeep(this.form));
              this.form = cloneDeep({});
            }).finally(() => {
              this.submitLoading = false;
            });
          } else if (this.form.type == 4) {
            finishSentiment({
              sentimentId: this.id,
              describe: this.form.describe,
              mobile: this.form.mobile.join(',')
            }).then(res => {
              this.$message.success(res.msg);
              this.show = false;
              this.$emit('submit', cloneDeep(this.form));
              this.form = cloneDeep({});
            }).finally(() => {
              this.submitLoading = false;
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
  .cancel-btn {
    position: absolute;
    bottom: 40px;
    left: 80px;
  }
</style>
